<div class='<%=this.id%> span-16 last'>
	<div class="report-head span-16">
		<div class="report-head-stripe">
			<button class='showData text_shadow rounded box_shadow'>Show Data</button>		
			<button class='zoomOut text_shadow rounded box_shadow'>Zoom Out</button>				
			<button class='hideReport right rounded text_shadow box_shadow'>Hide</button>
		</div>
		
		<div class="report-legend last report_legend_<%=this.id%> prepend-1 span-15"></div>
	</div>
	
	<div class="report-content prepend-1 span-14 last">
		<h3><%=this.fullName%></h3>

		<div class="report-graph report_content_<%=this.id%>"/>			
	</div>
</div>
<%= view('//bugstat/views/report/data_dialog',this)%>

<script type="text/javascript">
	$(function() {
		var reportTag = $( ".report_<%=this.id%>");
		var plotTag = $(".report_content_<%=this.id%>");

		$( ".report_<%=this.id%> .zoomOut")
		.click( function() {
			Bugstat.Controllers.ReportController.publishXRanges( reportTag, 0 );
		})

		$( ".report_<%=this.id%> .showData")
		.click( function() {
			$("#report_data_<%= this.id%>").dialog('open');
		})
		
		reportTag.click( function() {
			toggleHeaderStripe( "#report_<%=this.id%>" );
		});

		reportTag.mousemove( function() {
			showStripe( "#report_<%=this.id%>" );
		});
		
		plotTag.bind("plotselected", function (event, ranges) {
		        Bugstat.Controllers.ReportController.publishXRanges( reportTag, ranges );
		    } );
		
		reportTag.controller().plotReportGraph( plotTag );
	} );
</script>